WebCodecs VideoFrameプレーン：ビデオフレームデータへのアクセスの深掘り

WebCodecsは、ウェブベースのメディア処理におけるパラダイムシフトを象徴しています。これはメディアの構成要素への低レベルアクセスを提供し、開発者がブラウザで直接、高度なアプリケーションを作成できるようにします。WebCodecsの最も強力な機能の一つがVideoFrameオブジェクトであり、その中にあるVideoFrameプレーンはビデオフレームの生のピクセルデータを公開します。この記事では、高度なビデオ操作のためにVideoFrameプレーンを理解し、活用するための包括的なガイドを提供します。

VideoFrameオブジェクトの理解

プレーンについて詳しく見ていく前に、VideoFrameオブジェクト自体についておさらいしましょう。VideoFrameはビデオの単一フレームを表します。これには、デコードされた（またはエンコードされた）ビデオデータが、タイムスタンプ、デュレーション、フォーマット情報などの関連メタデータとともにカプセル化されています。VideoFrame APIは以下のためのメソッドを提供します：

• ピクセルデータの読み取り：ここでプレーンが登場します。
• フレームのコピー：既存のVideoFrameオブジェクトから新しいものを作成します。
• フレームのクローズ：フレームが保持している基盤となるリソースを解放します。

VideoFrameオブジェクトは、通常はVideoDecoderによってデコード処理中に作成されるか、カスタムフレームを作成する際に手動で作成されます。

VideoFrameプレーンとは何か？

VideoFrameのピクセルデータは、特にYUVのようなフォーマットでは、複数のプレーンに編成されることがよくあります。各プレーンは画像の異なるコンポーネントを表します。例えば、YUV420フォーマットでは、3つのプレーンがあります：

• Y（輝度）：画像の明るさ（輝度）を表します。このプレーンにはグレースケール情報が含まれます。
• U（Cb）：青色差クロマ成分を表します。
• V（Cr）：赤色差クロマ成分を表します。

RGBフォーマットは、一見すると単純に見えますが、場合によっては複数のプレーンを使用することもあります。プレーンの数とその意味は、VideoFrameのVideoPixelFormatに完全に依存します。

プレーンを使用する利点は、特定の色成分への効率的なアクセスと操作が可能になることです。例えば、色（UおよびVプレーン）に影響を与えずに、輝度（Yプレーン）だけを調整したい場合があります。

VideoFrameプレーンへのアクセス：API

VideoFrame APIは、プレーンデータにアクセスするために以下のメソッドを提供します：

• copyTo(destination, options)：VideoFrameの内容を、別のVideoFrame、CanvasImageBitmap、またはArrayBufferViewなどの宛先にコピーします。optionsオブジェクトは、どのプレーンをどのようにコピーするかを制御します。これがプレーンアクセスの主要なメカニズムです。

copyToメソッドのoptionsオブジェクトを使用すると、ビデオフレームデータのレイアウトとターゲットを指定できます。主なプロパティは次のとおりです：

• format：コピーされるデータの目的のピクセルフォーマット。これは元のVideoFrameと同じフォーマットでも、異なるフォーマット（例：YUVからRGBへの変換）でもかまいません。
• codedWidthとcodedHeight：ビデオフレームの幅と高さをピクセル単位で指定します。
• layout：メモリ内の各プレーンのレイアウトを記述するオブジェクトの配列。配列内の各オブジェクトは以下を指定します：
• offset：データバッファの先頭からプレーンデータの開始までのオフセット（バイト単位）。
• stride：プレーン内の各行の開始間のバイト数。これはパディングを処理するために非常に重要です。

YUV420 VideoFrameを生のバッファにコピーする例を見てみましょう：

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420にはY, U, Vの3つのプレーンがあります
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Yプレーン
    { offset: yPlaneSize, stride: width / 2 }, // Uプレーン
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // Vプレーン
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // リソース解放のため重要
}

解説：

• widthとheightに基づいて各プレーンのサイズを計算します。Yはフル解像度ですが、UとVはサブサンプリングされています（4:2:0）。
• layout配列はメモリレイアウトを定義します。offsetは各プレーンがバッファ内でどこから始まるかを指定し、strideはそのプレーンの次の行に移動するためにジャンプするバイト数を指定します。
• formatオプションは、一般的なYUV420フォーマットである'I420'に設定されます。
• 重要な点として、コピー後にリソースを解放するためにvideoFrame.close()が呼び出されます。

ピクセルフォーマット：可能性の世界

ピクセルフォーマットの理解は、VideoFrameプレーンを扱う上で不可欠です。VideoPixelFormatは、ビデオフレーム内で色情報がどのようにエンコードされるかを定義します。以下は、遭遇する可能性のある一般的なピクセルフォーマットの一部です：

• I420 (YUV420p)：Y、U、V成分が別々のプレーンに格納されるプレーナーYUVフォーマット。UとVは水平方向と垂直方向の両方で2分の1にサブサンプリングされます。非常に一般的で効率的なフォーマットです。
• NV12 (YUV420sp)：Yが一つのプレーンに格納され、UとV成分が2番目のプレーンにインターリーブされるセミプレーナーYUVフォーマット。
• RGBA：赤、緑、青、およびアルファ成分が単一のプレーンに格納され、通常は各成分8ビット（ピクセルあたり32ビット）です。成分の順序は異なる場合があります（例：BGRA）。
• RGB565：赤、緑、青の成分が単一のプレーンに格納され、赤に5ビット、緑に6ビット、青に5ビット（ピクセルあたり16ビット）が使用されます。
• GRAYSCALE：各ピクセルに対して単一の輝度（明るさ）値を持つグレースケール画像を表します。

VideoFrame.formatプロパティは、特定のフレームのピクセルフォーマットを示します。プレーンにアクセスする前に、このプロパティを確認するようにしてください。サポートされているフォーマットの完全なリストについては、WebCodecs仕様を参照してください。

実用的なユースケース

VideoFrameプレーンへのアクセスは、ブラウザでの高度なビデオ処理に幅広い可能性を開きます。以下にいくつかの例を挙げます：

1. リアルタイムビデオエフェクト

VideoFrameのピクセルデータを操作することで、リアルタイムのビデオエフェクトを適用できます。例えば、RGBAフレームの各ピクセルのR、G、B成分を平均化し、3つの成分すべてをその平均値に設定することで、グレースケールフィルタを実装できます。セピア調のエフェクトを作成したり、明るさやコントラストを調整したりすることもできます。

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // 赤
    rgba[i + 1] = gray;   // 緑
    rgba[i + 2] = gray;   // 青
  }

  // 変更されたデータから新しいVideoFrameを作成
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // 元のフレームを解放
  return newFrame;
}

2. コンピュータビジョンアプリケーション

VideoFrameプレーンは、コンピュータビジョンタスクに必要なピクセルデータへの直接アクセスを提供します。このデータを使用して、物体検出、顔認識、モーショントラッキングなどのアルゴリズムを実装できます。パフォーマンスが重要なコードセクションにはWebAssemblyを活用できます。

例えば、カラーのVideoFrameをグレースケールに変換し、その後、エッジ検出アルゴリズム（例：Sobelオペレータ）を適用して画像内のエッジを識別することができます。これは物体認識の前処理ステップとして使用できます。

3. ビデオ編集と合成

VideoFrameプレーンを使用して、クロッピング、スケーリング、回転、合成などのビデオ編集機能を実装できます。ピクセルデータを直接操作することで、カスタムトランジションやエフェクトを作成できます。

例えば、ピクセルデータの一部のみを新しいVideoFrameにコピーすることでVideoFrameをクロップできます。それに応じてlayoutのオフセットとストライドを調整します。

4. カスタムコーデックとトランスコーディング

WebCodecsはAV1、VP9、H.264などの一般的なコーデックを内蔵でサポートしていますが、カスタムコーデックやトランスコーディングパイプラインを実装するためにも使用できます。エンコードとデコードのプロセスを自分で処理する必要がありますが、VideoFrameプレーンを使用すると生のピクセルデータにアクセスして操作できます。これは、ニッチなビデオフォーマットや特殊なエンコーディング要件に役立つ可能性があります。

5. 高度な分析

基盤となるピクセルデータにアクセスすることで、ビデオコンテンツの詳細な分析を実行できます。これには、シーンの平均輝度の測定、主要な色の特定、シーンコンテンツの変化の検出などのタスクが含まれます。これにより、セキュリティ、監視、またはコンテンツ分析のための高度なビデオ分析アプリケーションが可能になります。

CanvasとWebGLの操作

VideoFrameプレーン内のピクセルデータを直接操作することもできますが、多くの場合、結果を画面にレンダリングする必要があります。CanvasImageBitmapインターフェースは、VideoFrameと<canvas>要素の間の橋渡しを提供します。VideoFrameからCanvasImageBitmapを作成し、drawImage()メソッドを使用してキャンバスに描画できます。

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // ビットマップリソースを解放
  videoFrame.close(); // VideoFrameリソースを解放
}

より高度なレンダリングには、WebGLを使用できます。VideoFrameプレーンからWebGLテクスチャにピクセルデータをアップロードし、シェーダーを使用してエフェクトや変換を適用できます。これにより、高性能なビデオ処理のためにGPUを活用できます。

パフォーマンスに関する考慮事項

生のピクセルデータを扱うことは計算集約的であるため、パフォーマンスの最適化を考慮することが重要です。以下にいくつかのヒントを示します：

• コピーを最小限に抑える：ピクセルデータの不必要なコピーを避けてください。可能な限り、インプレース操作を実行するようにしてください。
• WebAssemblyを使用する：コードのパフォーマンスが重要なセクションには、WebAssemblyの使用を検討してください。WebAssemblyは、計算集約的なタスクに対してネイティブに近いパフォーマンスを提供できます。
• メモリレイアウトを最適化する：アプリケーションに適したピクセルフォーマットとメモリレイアウトを選択してください。個々の色成分に頻繁にアクセスする必要がない場合は、パック形式（例：RGBA）の使用を検討してください。
• OffscreenCanvasを使用する：バックグラウンド処理には、メインスレッドをブロックしないようにOffscreenCanvasを使用してください。
• コードをプロファイリングする：ブラウザの開発者ツールを使用してコードをプロファイリングし、パフォーマンスのボトルネックを特定してください。

ブラウザの互換性

WebCodecsとVideoFrame APIは、Chrome、Firefox、Safariを含むほとんどの現代的なブラウザでサポートされています。ただし、サポートのレベルはブラウザのバージョンやオペレーティングシステムによって異なる場合があります。MDN Web Docsのようなサイトで最新のブラウザ互換性テーブルを確認し、使用している機能がターゲットブラウザでサポートされていることを確認してください。クロスブラウザ互換性のために、機能検出が推奨されます。

よくある落とし穴とトラブルシューティング

VideoFrameプレーンを扱う際に避けるべき一般的な落とし穴をいくつか紹介します：

• 不正なレイアウト：layout配列がピクセルデータのメモリレイアウトを正確に記述していることを確認してください。不正なオフセットやストライドは、画像の破損につながる可能性があります。
• ピクセルフォーマットの不一致：copyToメソッドで指定するピクセルフォーマットが、VideoFrameの実際のフォーマットと一致していることを確認してください。
• メモリリーク：使い終わったら、必ずVideoFrameオブジェクトとCanvasImageBitmapオブジェクトを閉じて、基盤となるリソースを解放してください。そうしないと、メモリリークにつながる可能性があります。
• 非同期操作：copyToは非同期操作であることを忘れないでください。ピクセルデータにアクセスする前に、コピー操作が完了するようにawaitを使用してください。
• セキュリティ制限：クロスオリジンのビデオからピクセルデータにアクセスする際に適用される可能性のあるセキュリティ制限に注意してください。

例：YUVからRGBへの変換

より複雑な例を考えてみましょう：YUV420 VideoFrameをRGB VideoFrameに変換します。これには、Y、U、Vプレーンを読み取り、それらをRGB値に変換し、新しいRGB VideoFrameを作成することが含まれます。

この変換は、以下の式を使用して実装できます：

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

こちらがコードです：

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Yプレーン
    { offset: yPlaneSize, stride: width / 2 }, // Uプレーン
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // Vプレーン
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // アルファ
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // 元のフレームを解放
  return newFrame;
}

この例は、VideoFrameプレーンを扱うことの力強さと複雑さを示しています。ピクセルフォーマット、メモリレイアウト、色空間変換についての十分な理解が必要です。

結論

WebCodecsのVideoFrameプレーンAPIは、ブラウザでのビデオ処理に対する新たなレベルの制御を可能にします。ピクセルデータに直接アクセスし操作する方法を理解することで、リアルタイムビデオエフェクト、コンピュータビジョン、ビデオ編集などのための高度なアプリケーションを作成できます。VideoFrameプレーンの扱いは難しいかもしれませんが、得られる潜在的な報酬は大きいです。WebCodecsが進化し続けるにつれて、メディアを扱うウェブ開発者にとって不可欠なツールになることは間違いないでしょう。

VideoFrameプレーンAPIを試して、その能力を探求することをお勧めします。根本的な原則を理解し、ベストプラクティスを適用することで、ブラウザで可能なことの限界を押し広げる、革新的で高性能なビデオアプリケーションを作成できます。

さらなる学習のために

• WebCodecsに関するMDN Web Docs
• WebCodecs仕様
• GitHub上のWebCodecsサンプルコードリポジトリ。